<template>
    <view>
        <view
            class="center ft-30 t-w head-fixed w100"
            :style="{ top: systemInfo.navBarHeight + 'px' }"
        >
            订单号：{{ orderDet?.orderNo || '' }}
        </view>
        <view class="head t-4 pl-30 pr-30 pb-28">
            <view class="align-center head-title bold mt-20 ft-48">
                {{ statusText[orderDet.orderStatus].title || '' }}
                <!-- 未支付显示的倒计时 -->
                <view
                    class="align-center"
                    v-if="orderDet?.orderStatus === 1 && getExpectCancelTime(orderDet) > 0"
                >
                    (<up-count-down
                        :time="getExpectCancelTime(orderDet)"
                        format="mm:ss"
                        @finish="upData"
                    ></up-count-down
                    >)
                </view>
            </view>
            <view class="ft-28 mt-6 t-9">{{ statusText[orderDet.orderStatus].tips || '' }}</view>
            <!-- 还需加上酒店拒绝取消和拒绝修改的拒绝原因的显示还有同意过时取消 -->
            <template v-if="[1, 4].includes(orderDet?.applyStatus)">
                <view class="mt-20">{{
                    orderDet?.applyStatus === 1
                        ? '提前退房申请中-等待酒店处理'
                        : '取消订单申请中-等待酒店处理'
                }}</view>
            </template>
            <template v-if="[3, 6].includes(orderDet?.applyStatus)">
                <view class="mt-20">酒店已拒绝</view>
                <view class="ft-28 mt-6 c-err">
                    拒绝原因：{{
                        orderDet?.applyStatus === 6
                            ? orderDet?.refundReason
                            : orderDet?.earlyCheckoutRejectReason
                    }}
                </view>
            </template>
            <template v-if="[2, 5].includes(orderDet?.applyStatus)">
                <view class="mt-20">酒店已同意</view>
                <view class="ft-28 mt-6 t-9" v-if="orderDet?.applyStatus === 5">
                    退款说明：{{ orderDet?.refundReason }}
                </view>
                <!-- 判断用户是否填写申请详情理由，如果没有填写则填入选择的理由即可 -->
                <view class="ft-28 mt-6 t-9" v-if="orderDet?.applyStatus === 2">
                    提前退房原因：
                    <text>{{ orderDet?.earlyCheckoutReason || '' }}</text>
                    <text v-if="orderDet.earlyCheckoutReasonDetail"
                        >({{ orderDet.earlyCheckoutReasonDetail }})</text
                    >
                </view>
            </template>
        </view>
    </view>
</template>

<script setup>
/**
 * @description 订单详情上方状态
 * @author yinzhi
 * @date 2025-05
 */
import { ref, defineComponent, computed } from 'vue'
import dayjs from 'dayjs/esm/index'
defineComponent({
    name: 'DetailHead'
})
const props = defineProps({
    orderDet: {
        type: Object,
        default: () => {}
    }
})

import { useStore } from 'vuex'
const store = useStore()
// 系统信息
const systemInfo = computed(() => store.state.platform.systemInfo || '')

// 计算列表中待支付的倒计时时间expectCancelTime字段距离当前时间的毫秒数
const getExpectCancelTime = data => {
    const time = Number(data.expectCancelTimeSeconds)
    return !time ? 0 : time
}

// 取消状态文字根据支付情况显示不同文字
const cancelText = {
    0: '订单未支付，有任何疑问或帮助可联系前台客服！',
    1: '订单已取消，支付金额将在48小时内退还到您的账户！',
    2: '订单已取消，退款金额已原路退还到您的账户！'
}
// 订单状态 1: 待支付, 2: 已支付待确认, 3: 已确认, 4: 已入住, 5: 已完成, 6: 已取消, 7: 过时取消
// 订单状态对应文字
const statusText = computed(() => {
    return {
        1: {
            title: '待支付',
            tips: '订单超时未支付, 系统将自动取消订单！'
        },
        2: {
            title: '预定成功',
            tips: '订单已成功预定，请耐心等待酒店确认！'
        },
        3: {
            title: '预定成功',
            tips: '酒店已为您保留房间，请安心出行！'
        },
        31: {
            title: '酒店拒绝-已取消',
            tips: '订单已取消，退款金额已原路退还到您的账户！'
        },
        4: {
            title: '入住中',
            tips: '有任何问题或帮助可联系前台客服！'
        },
        5: {
            title: '已完成',
            tips: '订单已完成，感谢您的支持！'
        },
        6: {
            title: '已取消',
            tips: cancelText[props.orderDet?.payStatus]
        },
        7: {
            title: '已取消',
            tips: cancelText[props.orderDet?.payStatus]
        } //已支付的取消订单
    }
})

const emit = defineEmits(['upData'])

// 倒计时结束 需要更改订单状态为取消状态
const upData = () => {
    emit('upData')
}
</script>

<style scoped lang="scss">
.head-fixed {
    height: 88rpx;
    background: $uni-color-primary;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 50;
}
.head {
    background: $uni-bg-color;
    padding-top: 88rpx;
}
</style>
